<template>
    <!--详情页面下的   新增备忘录和表格部分-->
    <div>
        <el-form ref="form" :model="form" label-width="80px">
            <h1>新增备忘信息</h1>
            <el-form-item label="操作人员">
                <el-select v-model="form.name" placeholder="请选择活动区域">
                    <el-option label="张三" value="shanghai"></el-option>
                    <el-option label="李四" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作日期">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="操作平台">
                <el-input v-model="form.platform"></el-input>
            </el-form-item>
            <el-form-item label="事件类别">
                <el-input v-model="form.category"></el-input>
            </el-form-item>
            <el-form-item label="事件内容">
                <el-input type="textarea" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
        <el-table align="center" :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" border>
            <el-table-column
                    align="center"
                    prop="name"
                    label="操作人员"
                    sortable
                    min-width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="date"
                    label="操作日期"
                    sortable
                    min-width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="platform"
                    label="操作平台"
                    sortable
                    min-width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="category"
                    label="事件类别"
                    sortable
                    min-width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    prop="content"
                    label="事件内容"
                    sortable
                    min-width="180">
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length">
        </el-pagination>
    </div>
</template>
<!--详情页面下  找房委托 选项卡下的 头部需求内容  这个组件引入到Information页面-->
<script>
    export default {
        name: "ZxMemo",
        data() {
            return {
                form: {
                    date:'',
                    name: '',
                    platform:'',
                    category:'',
                    content:'',
                    date1: '',
                },
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    platform:'带客宝',
                    category:'找房委托',
                    content: '北门，50万-70万，大三居室'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    platform:'iPhone',
                    category:'找房委托',
                    content: '看房记录：中德英伦、万科、蓝光COCO'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    platform:'安卓',
                    category:'找房委托',
                    content: '北门，50万-70万，大三居室'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    platform:'安卓',
                    category:'找房委托',
                    content: '对中德英伦有一定兴趣，另外学区房可以推荐'
                }]
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

<style lang="less" scoped>
.el-form{
    margin-left: 80px;
    padding: 10px;
    width: 800px;
    h1{
        margin: 10px;
    }
    .el-select{
        width: 330px;
    }
    .el-date-editor .el-input {
        width: 330px;
    }
    .el-input{
        width: 330px;
    }
}
.el-table{
    margin-right: 20px;
}
</style>